import { queryParkinglotNames } from '@/pages/Parking/Spot/service';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useState } from 'react';
import ModalDetail from '../Detail/ModalDetail';
import { queryCancelRecords } from '../service';
import type { CancelRecordItem } from '../types.d';

const CancelRecordList = () => {
  const [currOrderNo, setCurrOrderNo] = useState<string>('');
  const [orderDetailVisible, setOrderDetailVisible] = useState<boolean>(false);
  const columns: ProColumns<CancelRecordItem>[] = [
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '路段名称',
      dataIndex: 'parkingLotId',
      hideInForm: true,
      align: 'center',
      render: (_, record) => record.parkingLotName,
      fieldProps: { showSearch: true },
      debounceTime: 300,
      request: (val) => queryParkinglotNames(val.keyWords),
    },
    {
      title: '泊位编号',
      dataIndex: 'spotId',
      hideInForm: true,
      // hideInTable: true,
      align: 'center',
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '作废金额',
      dataIndex: 'cancelAmount',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'money',
      renderText: (text) => (text / 100).toFixed(2),
    },
    {
      title: '订单创建时间',
      dataIndex: 'orderCreateTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '作废时间',
      dataIndex: 'cancelTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '操作人',
      dataIndex: 'cancelOperUserAccount',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      renderText: (_, record) => `${record.cancelOperUserName}(${record.cancelOperUserAccount})`,
    },
    {
      title: '作废原因',
      dataIndex: 'cancelReason',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '作废记录',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/order', breadcrumbName: '订单管理' },
            { path: '/order/cancel-records', breadcrumbName: '作废记录' },
          ],
        },
      }}
    >
      <ProTable<CancelRecordItem>
        columns={columns}
        rowKey="_id"
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        search={{
          labelWidth: 'auto',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          return await queryCancelRecords(param, sort);
        }}
      />
      {currOrderNo && orderDetailVisible && (
        <ModalDetail
          orderNo={currOrderNo}
          visible={orderDetailVisible}
          close={() => {
            setOrderDetailVisible(false);
            setCurrOrderNo('');
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default CancelRecordList;
